<template>
  <div class="header">
    <div class="logo">
    <img src="../assets/images/logo.png">
    </div>
    <div class="total-data">
      <div class="item">
        <h3>订单总量</h3>
        <i>{{orders}}</i>
        <span>单</span>
      </div>
      <div class="item">
        <h3>总重量</h3>
        <i>{{goodsWeight}}</i>
        <span>吨</span>
      </div>
      <div class="item">
        <h3>会员量</h3>
        <i>{{user}}</i>
        <span>人</span>
      </div>
      <div class="item">
        <h3>饮料瓶</h3>
        <i>{{bottle}}</i>
        <span>只</span>
      </div>
      <div class="item">
        <h3>家电</h3>
        <i>{{houseHold}}</i>
        <span>台</span>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'Header',
  data(){
    return {
      orders: '0',
      goodsWeight: '0',
      user: '0',
      bottle: '0',
      houseHold: '0',
      pointNum0: 0,
      pointNum1: 0,
      pointNum2: 0,
    }
  },
  methods: {
    getHeaderData(){
      axios({
        method: 'post',
        url: '/api/dataWall/findHeaderData'
      }).then((res)=>{
        let result = res.data
        this.user = result.COUNT_USER
        this.houseHold = result.COUNT_HOUSEHOLD
        this.orders = result.COUNT_ORDERS
        this.bottle = result.COUNT_BOTTLE
        this.goodsWeight = result.COUNT_GOODS_WEIGHT
      })
    }
  },
  mounted(){
    this.getHeaderData()
    setInterval(this.getHeaderData, this.$IntervalSeconds)
  }
}
</script>

<style lang="stylus">
.header
  position fixed
  display flex
  justify-content space-between
  align-items center
  top 0
  left 0
  right 0
  height 80px
  background-color rgba(4,37,49,.8)
  z-index 3
  .logo
    height 55%
    padding-left 15px
    @media (max-width: 750px)
      display none
    img
      height 100%
  .total-data
    display flex
    flex-grow 1
    justify-content flex-end
    .item
      display flex
      flex-wrap wrap
      align-items center
      justify-content center
      height 70px
      width 16%
      line-height 20px
      margin-right 15px
      box-sizing border-box
      border 2px solid rgba(255, 255, 255, .2)
      background-color #042531
      @media (max-width: 750px)
        width auto
        flex-grow 1
        margin-right 0
        border none
      h3
        font-size 16px
        margin 0
        @media (max-width: 1300px)
          width 100%
        @media (max-width: 900px)
          font-size 14px
      i
        color #fff041
        font-size 24px
        font-style normal
        padding 0 5px
        font-weight 700
        @media (max-width: 900px)
          font-size 18px
      span
        font-size 16px
        @media (max-width: 900px)
          width 100%
          font-size 14px
</style>